<!--先搭建基本框架 html/css/js/ts-->

<template>
  <div class="person">
    <h2>姓名: {{ name }}</h2>
    <h2>年龄: {{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>

    <h2>对象: {{obj}}</h2>
    <button @click="changeObj">修改对象的值</button>
  </div>
</template>

<style>
.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}
</style>


<!-- 下面两种方式,虽然都能去实现页面展示的效果,但不能实现交互的效果,下面学习响应式 -->
<!--什么是响应式？简单理解就是前端页面展示的时候，会与用户发生交互行为，导致页面原始数据发生变化-->
<!--关于响应式，js/ts中的基本类型直接使用ref，对象使用reactive-->
<script lang="ts" setup>
// data 部分
import {reactive, ref} from "vue";
// 对于使用响应式数据的基本类型需要使用ref包裹起来，访问时，需要通过 .value 来进行访问
let name = ref('张三')
let age = ref(18)
let tel = '1234567890'

let obj = reactive({
  k1: name,
  v1: age
})

// ref 也能去包裹对象，但去使用对象的属性时，没有 reactive 方便
// 需要先通过 obj.value 再去拿到对应的 属性值
// let obj = ref({
//   k1: name,
//   v1: age
// })


// methods部分
function changeName() {
  name.value = 'zhang-san'
}
function changeAge() {
  age.value += 1
}
function showTel() {
  alert(tel)
}
function changeObj() {
  // obj.k1 = 'zhang-san'
  // obj.v1 += 1

  // reactive 修改整体对象
  // 只能通过下面的方法来修改
  Object.assign(obj, {k1: 'huawei', v1: 2323})

  // // ref 的写法
  // obj.value.k1 = 'zhang-san'
  // obj.value.v1 += 1

  // 整体修改对象
  // obj.value 拿到的是对象整体的值
  // 属性要和原来保持一样
  // obj.value = {k1: 'huawei', v1: 111}
}
</script>

<!-- 通过 script 标签 写setup时，就不需要加上 return 了 -->
<!--<script setup lang="ts">-->
<!--// data部分-->
<!--let name = '张三'-->
<!--let age = 18-->
<!--let tel = '1234567890'-->
<!--// methods部分-->
<!--function changeName() {-->
<!--  name = 'zhang-san'-->
<!--}-->
<!--function changeAge() {-->
<!--  age += 1-->
<!--}-->
<!--function showTel() {-->
<!--  alert(tel)-->
<!--}-->

<!--</script>-->

<script lang="ts">
export default {
  name: 'Person',

  // setup 还有另外一种写法，通过 script 标签

  // setup() {
  //   // 里面可以直接写 data 和 methods 部分
  //
  //   // data
  //   let name = '张三'
  //   let age = 18
  //   let tel = '1234567890'
  //
  //   // methods
  //   function changeName() {
  //     name = 'zhang-san'
  //   }
  //   function changeAge() {
  //     age += 1
  //   }
  //   function showTel() {
  //     alert(tel)
  //   }
  //
  //   return {name, age,changeName,changeAge, showTel}
  // },



  // 下面的 data、methods 都是vue2的写法，接下来，我们使用vue3的写法
  // data() {
  //     return {
  //       name:'张三',
  //       age:18,
  //       tel:'12345678901'
  //     }
  // },
  // methods: {
  //   showTel() {
  //     alert(this.tel)
  //   },
  //   changeName() {
  //     this.name = "zhang-san"
  //   },
  //   changeAge() {
  //     this.age += 1
  //   }
  // }
}
</script>


